<template>
  <el-dialog
    :title="`${currentRowObj ? '修改' : '新增'}数据字典`"
    width="500px"
    :close-on-click-modal="false"
    destroy-on-close
    :visible="dialogVisible"
    class="dialog-wrapper"
    @close="close"
  >
    <el-form
      v-if="dialogVisible"
      ref="ruleForm"
      :model="ruleForm"
      label-position="top"
      :rules="rules"
    >
     <el-form-item label="字典类型" prop="keyType">
         <el-input v-model="ruleForm.keyType" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="字典名称" prop="keyName">
        <el-input v-model="ruleForm.keyName" placeholder="请输入" />
      </el-form-item>
    </el-form>


    <span slot="footer">
      <el-button @click="close">取消</el-button>
      <el-button type="primary" :loading="btnLoading" @click="submitData">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { DictAdd, DictUpdate } from "api/sys/dict";
import rules from "./config/rules";
import dialogMixin from "mixins/dialogMixin";

export default {
  mixins: [dialogMixin],
  props: {
    // 当前行数据
    currentRowObj: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      ruleForm: {
        // 字典名称
        keyName: "",
        // 字典类型
        keyType: "",
      },
      rules,
    };
  },

  methods: {
    /**
     * 提交
     */
    async doSubmit() {
      try {
        await (this.currentRowObj ? DictUpdate : DictAdd)(this.ruleForm);
        this.$message.success(`数据字典${this.currentRowObj ? "修改" : "新增"}成功`);
        this.$emit("success");
        this.close();
      } catch (e) {
        console.log(e);
      } finally {
        this.btnLoading = false;
      }
    },
    /**
     * 初始化弹窗
     */
    initForm() {
      if (this.currentRowObj) {
        Object.assign(this.ruleForm, this.currentRowObj);
      }
    },
  },
};
</script>
